﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单击箭头按钮切换图片</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  var page = 1;
  var i = 4; //每版放4个图片
  //向后 按钮
  $("span.next").click(function(){    //绑定click事件
   var $parent = $(this).parents("div.img_show");//根据当前点击元素获取到父元素
   var $img_show = $parent.find("div.img_content_list"); //寻找到“图片展示区域”
   var $img_content = $parent.find("div.img_content"); //寻找到“图片展示区域”外围的DIV元素
   var v_width = $img_content.width() ;
   var len = $img_show.find("li").length;
   var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数
   if( !$img_show.is(":animated") ){    //判断“图片展示区域”是否正在处于动画
		if( page == page_count ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
		  $img_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面
		  page = 1;
		  }else{
		  $img_show.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面
		  page++;
	   }
   }
   $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
 });
  //往前 按钮
  $("span.prev").click(function(){
	 var $parent = $(this).parents("div.img_show");//根据当前点击元素获取到父元素
	 var $img_show = $parent.find("div.img_content_list"); //寻找到“图片展示区域”
	 var $img_content = $parent.find("div.img_content"); //寻找到“图片展示区域”外围的DIV元素
	 var v_width = $img_content.width();
	 var len = $img_show.find("li").length;
	 var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
	 if( !$img_show.is(":animated") ){    //判断“图片展示区域”是否正在处于动画
	   if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
		  $img_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
		  page = page_count;
	  }else{
		  $img_show.animate({ left : '+='+v_width }, "slow");
		  page--;
	  }
	}
    $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
  });
});
</script>

</head>

<body>

<div class="img_show">
  <div class="img_caption">
    <div class="highlight_tip">
        <span class="current">1</span><span>2</span><span>3</span><span>4</span>
    </div>
    <div class="change_btn">
        <span class="prev" >上一页</span>
        <span class="next">下一页</span>
    </div>
    <em><a href="#">更多>></a></em>
  </div>
  <div class="img_content">
    <div  class="img_content_list">
      <ul>
        <li><a href="#"><img src="images/011.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/012.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/013.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/014.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/021.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/022.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/023.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/024.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/031.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/032.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/033.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/034.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/041.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/042.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/043.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/044.jpg" alt="" /></a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>